<template lang="html">
  <div class="">
        <div class="t_header">
            <el-form :inline="true" label-width="100px" class="demo-form-inline">
              <el-form-item label="供应商名称">
                <el-input v-model="supplierName" placeholder="供应商名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="el_button" @click="onSubmit(1)">查询</el-button>
              </el-form-item>
            </el-form>
        </div>

        <div class="body">
            <el-table :data="tableData.list" style="width: 100%; margin-top: 20px">
                <el-table-column prop="name" label="供应商姓名" width="180" align="center"></el-table-column>
                <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
                <el-table-column label="收货地址" align="center">
                        <template slot-scope="scope">
                          <el-popover trigger="hover" placement="top">
                            <p>详细地址: {{scope.row.provicne}}-{{scope.row.city}}-{{scope.row.county}}-{{scope.row.goods_detail}}</p>
                            <div slot="reference" class="name-wrapper">
                              <el-tag size="medium">{{scope.row.provicne}}-{{scope.row.city}}-{{scope.row.county}}</el-tag>
                            </div>
                          </el-popover>
                        </template>
                </el-table-column>
                <el-table-column prop="number" label="需补充数量" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">通过</el-button>
                  </template>
                </el-table-column>
            </el-table>

        </div>
        <div class="el-page" v-if="tableData.rows">
     			 <div class="block">
               <el-pagination layout="prev, pager, next" :page-count="tableData.rows" :current-page="currentPage" @current-change="changePage" align="center"></el-pagination>
     			</div>
   		 </div>

        <el-dialog title="通过" :visible.sync="dialogVisible" width="31%" center>
           <div class="el_form">
            <el-transfer :titles="['全部设备号','已选设备号']" :button-texts="['移除', '添加']" v-model="currentValue" :data="checkDatas"></el-transfer>
           </div>
           <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertDialog">确 定</el-button>
           </span>
        </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      token: this.$store.state.user.token3,
      tableData: [],
      currentValue:[],
      checkDatas:[],
      number:[],
      supplierName:'',
      currentRow:{},
      dialogVisible:false,
      currentPage:1
    }
  },
  created(){
      this.onSubmit()
  },
  methods:{
      onSubmit(page = 1){
        this.currentPage=page
        this.$http2.supplementList({
          page:page,
          key:this.supplierName,
          token:this.token
        })
        .then(res=>{
          this.tableData = res.data.data
        })
      },
      // 通过
      handleClick(e){
        this.dialogVisible = true;
        this.currentRow = e;
        this.$http2.getEqInfo()
        .then(res=>{
          this.checkDatas = []
          for(var i=0;i<res.data.data.length;i++){
              this.checkDatas.push({
                key:i,
                label:res.data.data[i]
              })
          }
        })
      },
      // / 通过操作
      insertDialog(){
          if(this.currentValue.length==0){
            this.$message.error("请选择设备号");
            return false;
          }
          for(var i=0;i<this.currentValue.length;i++){
              this.number.push(this.checkDatas[this.currentValue[i]].label)
          }
          this.$http2.deliverGoods({
            id: this.currentRow.id,
            eq_num:this.number,
            token: this.token,
            sm_id:this.currentRow.sm_id,
            number:this.currentRow.number
          })
          .then(res=>{
            if(res.data.code == 1){
              this.$message.success(res.data.msg)
                this.dialogVisible = false;
              this.onSubmit()
            }else{
              this.$message.error(res.data.msg)
              this.dialogVisible = false;
            }
          })
      },

      changePage(e){
        this.onSubmit(e);
      },
  }
}
</script>

<style lang="css" scoped>

.preview-img{
    display: block;
    width: 100%;
    height: 30px;
}
</style>
